import React from 'react';
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';

const TrodeCard = ({ 
  trode, 
  isExpanded, 
  onToggle, 
  renderProcesses, 
  renderUsers 
}) => {
  const formatLastUpdate = (timestamp) => {
    if (!timestamp) return 'Never';
    return new Date(timestamp).toLocaleTimeString();
  };

  return (
    <div className="trode-item">
      <div 
        className="px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors duration-200"
        onClick={() => onToggle(trode.id)}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <div className="flex-shrink-0">
              <span className="text-lg font-medium text-gray-900">
                {trode.id}
              </span>
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <div>
              <span className={`status-badge ${
                trode.online ? 'status-online' : 'status-offline'
              }`}>
                {trode.online ? 'Online' : 'Offline'}
              </span>
            </div>
            <div className="flex flex-col space-y-1 items-start min-w-[110px]">
              {trode.cpu !== undefined && (
                <div className="grid grid-cols-3 gap-2 items-center w-full">
                  <span className="text-sm text-gray-500">CPU:</span>
                  <div className="w-16 bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-green-600 h-2 rounded-full transition-all duration-300 ease-out" 
                      style={{ width: `${trode.cpu}%` }}
                    ></div>
                  </div>
                  <span className="text-sm">{trode.cpu.toFixed(1)}%</span>
                </div>
              )}
              {trode.memory !== undefined && (
                <div className="grid grid-cols-3 gap-2 items-center w-full">
                  <span className="text-sm text-gray-500">Mem:</span>
                  <div className="w-16 bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-yellow-600 h-2 rounded-full transition-all duration-300 ease-out" 
                      style={{ width: `${trode.memory}%` }}
                    ></div>
                  </div>
                  <span className="text-sm">{trode.memory.toFixed(1)}%</span>
                </div>
              )}
            </div>
            <div className={`transform transition-transform duration-300 ease-in-out ${
              isExpanded ? 'rotate-180' : 'rotate-0'
            }`}>
              <ChevronDownIcon className="w-5 h-5 text-gray-400" />
            </div>
          </div>
        </div>
        <div className="mt-2 text-sm text-gray-500">
          Last Update: {formatLastUpdate(trode.last_update)}
        </div>
      </div>
      
      <div className={`overflow-hidden transition-all duration-300 ease-in-out ${
        isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
      }`}>
        <div className="bg-gray-50 border-t border-gray-200">
          <div className="px-6 py-4">
            <div className="mb-4">
              <div className="text-base font-medium text-gray-900">
                {trode.address}
              </div>
              <div className="text-base text-gray-500">
                Port {trode.port}
              </div>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <div>
                <div className="flex justify-between items-center mb-3">
                  <h4 className="text-lg font-medium text-gray-900">
                    Top Processes
                  </h4>
                  {trode.process_timestamp && (
                    <span className="text-sm text-gray-500">
                      Updated: {new Date(trode.process_timestamp).toLocaleTimeString()}
                    </span>
                  )}
                </div>
                {renderProcesses(trode.processes, trode.process_timestamp)}
              </div>
              <div>
                <div className="flex justify-between items-center mb-3">
                  <h4 className="text-lg font-medium text-gray-900">
                    Top Users
                  </h4>
                  {trode.user_timestamp && (
                    <span className="text-sm text-gray-500">
                      Updated: {new Date(trode.user_timestamp).toLocaleTimeString()}
                    </span>
                  )}
                </div>
                {renderUsers(trode.users, trode.user_timestamp)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TrodeCard; 